<template>
  <div class="timetable-container">
    <button @click="exportToExcel">导出为 Excel</button>
    <div v-if="!hasValidData" class="no-data-message">
      <p>没有课表数据</p>
    </div>
    <el-table v-else :data="timeSlots" border style="width: 100%; margin-top: 20px;">
      <el-table-column label="Time" prop="time" width="120"></el-table-column>
      <el-table-column v-for="day in daysOfWeek" :key="day" :label="day">
        <template #default="scope">
          <div v-for="(course, index) in getDaySchedule(day, scope.row.time)" :key="index">
            <strong>{{ course.cname }}</strong>
            <strong>{{ course.address }}</strong>
            <strong>{{ course.tname }}</strong>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import axios from "axios";
import { utils, writeFile } from 'xlsx';
const XLSX = { utils, writeFile };
import {useRoute} from "vue-router";

// 静态课表数据（这里用作示例，实际应用中可能是从后端获取）
let timetable = ref([]);

// 时间段（假设每天四节课）
const timeSlots = ref([
  { time: '12节' },
  { time: '34节' },
  { time: '56节' },
  { time: '78节' },
  { time: '910节'}
]);

onMounted(() => {
  fetchTimetable();
});

// 获取课表数据
async function fetchTimetable() {
  try {
    const res = await axios.get("http://localhost:8080/getTimeTableBySno", {
      params: {
        sno: id // 使用搜索查询作为参数
      }
    });

    if (res.data && Array.isArray(res.data)) {
      // 确保每次更新时创建一个新的数组实例，以便 Vue 能够捕捉到变化
      timetable.value = res.data.map(item => ({
        day: item.time.match(/周[一二三四五六日]/)?.[0] || '未知', // 提取星期
        time: `${item.time.match(/\d+/g)?.join('-') || '未知'}`, // 提取节次
        cname: item.cname || '未知',
        tname: item.tname || '未知',
        address: item.address || '未知'
      }));
    } else {
      console.error('Unexpected data format:', res.data);
      timetable.value = [];
    }
  } catch (err) {
    console.error(err);
    timetable.value = [];
  }
}

// 星期数组
const daysOfWeek = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];


// 搜索查询字符串
const route=useRoute()
const id=route.query.id

// 计算属性：是否有有效数据
const hasValidData = computed(() => {
  return timetable.value.length > 0;
});

// 辅助函数：获取某天特定时间段的课程
function getDaySchedule(day, timeSlot) {
  const parsedTime = timeSlot.replace('节', ''); // 移除"节"
  return timetable.value.filter(item => item.day === day && item.time === parsedTime);
}

// 添加导出功能
function exportToExcel() {
  const ws = XLSX.utils.json_to_sheet(timetable.value);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "课表");

  // 设置文件名
  const filename = `class_schedule_${id}.xlsx`;

  // 生成 Excel 文件并下载
  XLSX.writeFile(wb, filename);
}
</script>

<style scoped>
.timetable-container {
  padding: 20px;
}

.no-data-message {
  text-align: center;
  color: red;
  font-weight: bold;
}

/* 根据需要调整样式 */
</style>